/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2023-02-09 16:02:49
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2023-02-13 21:13:29
 */
import { Component, PropsWithChildren } from 'react'
import { View, Image, Button } from '@tarojs/components'
// import { Swiper, SwiperItem, Divider, Grid, GridItem, Icon } from '@nutui/nutui-react-taro';
import { Swiper, SwiperItem } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import { AtGrid } from "taro-ui"
import banner01 from '../../resource/images/banner/banner01.jpg'
import banner02 from '../../resource/images/banner/banner02.jpg'
import banner03 from '../../resource/images/banner/banner03.jpg'
import userPng from '../../resource/images/work/user.png'
import menuPng from '../../resource/images/work/menu.png'
import rolePng from '../../resource/images/work/role.png'
import postPng from '../../resource/images/work/post.png'
import deptPng from '../../resource/images/work/dept.png'
import dictPng from '../../resource/images/work/dict.png'
import configPng from '../../resource/images/work/config.png'
import noticePng from '../../resource/images/work/notice.png'
import logPng from '../../resource/images/work/log.png'
import './index.scss'
import Taro from '@tarojs/taro'

type PageStateProps = PropsWithChildren & {
  store: {
    CounterStore: {
      counter: number,
      add: Function,
      sub: Function,
    }
  }
}

interface work {
  props: PageStateProps;
}

@inject('store')
@observer
class work extends Component<PropsWithChildren> {
  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  onGridClick() {
    Taro.showToast({
      title: '模块建设中~',
      icon: 'none',
      duration: 2000
    })
  }

  render() {
    return (
      <View className='work-container'>
        <Swiper
          circular
          indicatorDots
          autoplay>
          <SwiperItem >
            <Image src={banner01} style={{ height: '150px' }} />
          </SwiperItem>
          <SwiperItem >
            <Image src={banner02} style={{ height: '150px' }} />
          </SwiperItem>
          <SwiperItem >
            <Image src={banner03} style={{ height: '150px' }} />
          </SwiperItem>
        </Swiper>
        <View className='panel_title'>系统管理</View>
        <AtGrid columnNum={4} onClick={this.onGridClick} data={
          [
            {
              image: userPng,
              value: '用户管理'
            },
            {
              image: rolePng,
              value: '角色管理'
            },
            {
              image: menuPng,
              value: '菜单管理'
            },
            {
              image: deptPng,
              value: '部门管理'
            },
            {
              image: postPng,
              value: '岗位管理'
            },
            {
              image: dictPng,
              value: '字典管理'
            },
            {
              image: configPng,
              value: '参数设置'
            },
            {
              image: noticePng,
              value: '通知公告'
            },
            {
              image: logPng,
              value: '日志管理'
            }
          ]
        } />
      </View>
    )
  }
}

export default work
